<template>
  <div>
    <el-row class="gl_searchBox gl_mb_15" :gutter="20">
      <el-col :md="5">
        <p>学员姓名</p>
        <el-input v-model="Api_GET_ClubCheckInLogQO.StudentName" size="mini" clearable placeholder="请输入学员姓名" @change="getinlog()" />
      </el-col>
      <el-col :md="5">
        <p>证件号</p>
        <el-input v-model="Api_GET_ClubCheckInLogQO.IdCardNumber" size="mini" clearable placeholder="请输入证件号" @change="getinlog()" />
      </el-col>
      <!-- <el-col :md="1">
        <el-button type="text" icon="el-icon-camera-solid" style="font-size:30px;margin-top:12px" @click="openphoto()" />
      </el-col> -->
      <el-col :md="10">
        <i class="el-icon-camera-solid icon_card" @click="openphoto()" />
        <i class="el-icon-postcard icon_card" @click="openCard()" />
        <el-button size="mini" type="primary" style="margin-top:26px" @click="getinlog()">筛选</el-button>
        <el-button size="mini" type="warning" @click="reset()">重置</el-button>
      </el-col>
    </el-row>
    <div style="margin-top:12px;margin-bottom:12px">
      <p style="color:#1990FF">学员列表 (到课 <span>{{ incount }}</span> 人|未到 <span>{{ outcount }}</span> 人) 消耗课时 <span>{{ tableData[0]?incount*tableData[0].deductClassPeriod:"" }}</span> </p>
    </div>
    <div>
      <el-table v-loading="tableLoading" class="gl_table_noBorder" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="学生姓名" prop="studentName" />
        <el-table-column label="性别" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.genderCode && row.genderCode ? row.genderCode=== 'M' ? '男' : '女': '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="证件号" prop="idCardNumber" />
        <el-table-column label="应扣课时" prop="deductClassPeriod" align="center" />
        <el-table-column label="到课状态">
          <template slot-scope="{ row }">
            {{ row.checkInStatusCode && row.checkInStatusCode ? row.checkInStatusCode === 'Present' ? '已到课' : '未到课': '' }}
          </template>
        </el-table-column>
        <el-table-column label="签到时间">
          <template slot-scope="{ row }">
            <span v-if="row.checkInTime">
              {{ row.checkInTime && row.checkInTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" :disabled="!Boolean(row.checkOutTime===null)" @click="toClass(row)">到课</el-button>
            <el-button v-if="row.checkOutTime!==null" size="mini" type="text" :disabled="!Boolean(row.checkOutTime===null)" @click="notoClass(row)">未到</el-button>
            <el-button v-else size="mini" type="text" style="color:#FFBA00" :disabled="!Boolean(row.checkOutTime===null)" @click="notoClass(row)">未到</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubCheckInLogQO.Page"
        :page-size="Api_GET_ClubCheckInLogQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <phtot ref="photo" />
    <cardSignIn ref="cardSignIn" @getList="getinlog" />
  </div>
</template>

<script>
import phtot from './photo.vue';
import { api_GET_ClubCheckInLog, api_POST_ClubCheckInLogCheckIn, api_POST_ClubCheckInLogIdUnCheckIn } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCheckInLogQO, CreateCheckInLogInput } from '@/lib/form/hall/swaggerForm';
import cardSignIn from '@/viewsHall/sign/components//cardSignIn.vue';
export default {
  components: {
    phtot, cardSignIn
  },
  data() {
    return {
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      imgSrc: '', // 图片拍照
      tableLoading: false,
      currentPage: 1,
      incount: 0,
      outcount: 0,
      CreateCheckInLogInput: new CreateCheckInLogInput(),
      totalPage: 0,
      Api_GET_ClubCheckInLogQO: new Api_GET_ClubCheckInLogQO(),
      tableData: []
    };
  },
  created() {
    this.getinlog();
  },
  methods: {
    getinlog(page) {
      this.tableLoading = true;
      this.Api_GET_ClubCheckInLogQO.CheckInCode = '';
      this.Api_GET_ClubCheckInLogQO.Page = page || 1;
      this.Api_GET_ClubCheckInLogQO.SkipCount = (this.Api_GET_ClubCheckInLogQO.Page - 1) * this.Api_GET_ClubCheckInLogQO.MaxResultCount;
      this.Api_GET_ClubCheckInLogQO.CourseScheduleId = this.$route.query.CourseScheduleId;
      this.Api_GET_ClubCheckInLogQO.CheckInTime = ''; // type: boolean
      this.Api_GET_ClubCheckInLogQO.CheckOutTime = '';
      this.Api_GET_ClubCheckInLogQO.StartHour = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.StartMinute = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.EndHour = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.EndMinute = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.StartTime = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.EndTime = null; // type: integer
      const _json = {
        CourseScheduleId: this.$route.query.CourseScheduleId
      };
      api_GET_ClubCheckInLog(_json).then(res => {
        this.incount = 0;
        this.outcount = 0;
        for (var i = 0; i < res.items.length; i++) {
          if (res.items[i].checkInStatusCode === 'Present') {
            this.incount++;
          } else {
            this.outcount++;
          }
        }
      });
      api_GET_ClubCheckInLog(this.Api_GET_ClubCheckInLogQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        console.log(res, 'sss');
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCheckInLogQO.MaxResultCount = MaxResultCount;
      this.getinlog();
    },
    pageIndexChange(currentPage) {
      this.getinlog(currentPage);
    },
    toClass(row) {
      this.tableLoading = true;
      this.CreateCheckInLogInput.studentId = row.studentId; //  学员Id type: string
      this.CreateCheckInLogInput.courseScheduleId = row.courseScheduleId; //  课表Id type: string
      // this.CreateCheckInLogInput.checkInStatusCode = 'Present';
      api_POST_ClubCheckInLogCheckIn(this.CreateCheckInLogInput).then(res => {
        this.$message({
          message: '签到成功',
          type: 'success'
        });
        this.$refs.photo.dialogVisible = false;
        this.tableLoading = false;
        this.getinlog();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 拍照签到
    photoclass(row) {
      this.tableLoading = true;
      this.CreateCheckInLogInput.studentId = row.studentId; //  学员Id type: string
      this.CreateCheckInLogInput.courseScheduleId = row.courseScheduleId; //  课表Id type: string
      // this.CreateCheckInLogInput.checkInStatusCode = 'Present';
      api_POST_ClubCheckInLogCheckIn(this.CreateCheckInLogInput).then(res => {
        this.$message({
          message: '签到成功',
          type: 'success'
        });
        this.tableLoading = false;
        this.getinlog();
        this.$refs.photo.reset();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    notoClass(row) {
      console.log(row);
      this.tableLoading = true;
      // this.CreateCheckInLogInput.studentId = row.studentId;
      // this.CreateCheckInLogInput.courseScheduleId = row.courseScheduleId;
      this.CreateCheckInLogInput.checkInStatusCode = 'NonePresent';
      if (row.checkLogId === null) {
        this.$message({
          message: '你还没有到课',
          type: 'success'
        });
        this.tableLoading = false;
        return;
      }
      api_POST_ClubCheckInLogIdUnCheckIn(row.checkLogId).then(res => {
        this.$message({
          message: '已取消签到',
          type: 'success'
        });
        this.tableLoading = false;
        this.getinlog();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    reset() {
      this.Api_GET_ClubCheckInLogQO = new Api_GET_ClubCheckInLogQO();
      this.getinlog();
    },
    // 打开摄像头
    openphoto() {
      this.$refs.photo.dialogVisible = true;
      var _this = this;
      this.$nextTick(function() {
        this.thisCancas = document.getElementById('canvasCamera');
        this.thisContext = this.thisCancas.getContext('2d');
        this.thisVideo = document.getElementById('videoCamera');

        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function (constraints) {
          // 首先获取现存的getUserMedia(如果存在)
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
            // 有些浏览器不支持，会返回错误信息
            // 保持接口一致
            if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject);
            });
          };
        }
        var constraints = { audio: false, video: { width: 300, height: 300, transform: 'scaleX(-1)' }};
        navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        // 旧的浏览器可能没有srcObject
          if ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = stream;
          } else {
          // 避免在新的浏览器中使用它，因为它正在被弃用。
            _this.thisVideo.src = window.URL.createObjectURL(stream);
          }
          _this.thisVideo.onloadedmetadata = function (e) {
            _this.thisVideo.play();
          };
        }).catch(err => {
          console.log(err);
        });
      });
    },
    // 打开实体卡签到弹框
    openCard() {
      this.$refs.cardSignIn.dialogVisible = true;
      this.$refs.cardSignIn.init();
    }
  }

};
</script>

<style lang="scss" scoped>
.date {
    color: black;
    opacity: 65%;
}
.icon_card {
  cursor: pointer;
  font-size: 32px;
  color: #1890ff;
  vertical-align: bottom;
  margin-right: 10px;
  margin-bottom: -2px;
}
</style>

